$chat-tool-call-item: (
    font-size: 14px,
    header-height: 32px,
    color-2: var(--ibiz-ai-chat-color-2),
    bg: var(--ibiz-ai-chat-hover-background-color),
    bg-2: var(--ibiz-ai-chat-hover-background-color-2),
    border-radius: var(--ibiz-ai-chat-border-radius),
    hover-bg-color: var(--ibiz-ai-chat-hover-background-color),
    border: var(--ibiz-ai-chat-border-color),
    bg-primary: #1e1e1e,
    bg-secondary: #2d2d2d,
    bg-tertiary: #3c3c3c,
    text-primary: #d4d4d4,
    text-secondary: #9cdcfe,
    text-error: #f44747,
    text-string: #ce9178,
    text-boolean: #569cd6,
    text-property: #9cdcfe,
    text-number: #b5cea8,
    border-color: #444,
    accent-primary: #0e639c,
    accent-error: rgb(244 71 71 / 20%)
);

@include b(chat-tool-call-item) {
    @include set-component-css-var('chat-tool-call-item', $chat-tool-call-item);

    margin-bottom: 8px;
    background-color: getCssVar(chat-tool-call-item, bg);
    border: getCssVar(chat-tool-call-item, border-color);
    border-radius: 4px;

    svg {
        width: 14px !important;
        height: 14px !important;
        cursor: pointer;
        background: none;
        border: none;
        fill: none !important;
    }

    @include e(header) {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: 8px 10px;

        >div {
            display: flex;
            column-gap: 4px;
            align-items: center;
        }
    }

    @include e(header-left) {
        gap: 8px;
        min-width: 0;
        margin-right: 8px;
        @include m(caption) {
            flex-shrink: 0;
        }

        @include m(desc) {
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    }

    @include e(header-right) {
        flex-shrink: 0;
    }

    @include e(content) {
        padding: 8px 0;
    }

    @include e(copy) {
        display: flex;
        align-items: center;
    }

    .code-line {
        display: flex;
        min-height: 18px;
        margin-bottom: 5px;
        font-family: Consolas, monospace;
        font-size: 0.95rem;
    }

    .line-number {
        min-width: 20px;
        margin-right: 15px;
        color: #6a9955;
        text-align: right;
        user-select: none;
    }

    .property {
        color: getCssVar(chat-tool-call-item, text-property);
    }

    .string {
        overflow: hidden;
        color: getCssVar(chat-tool-call-item, text-string);
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .boolean {
        color: getCssVar(chat-tool-call-item, text-boolean);
    }

    .number {
        color: getCssVar(chat-tool-call-item, text-number);
    }

    .null {
        color: getCssVar(chat-tool-call-item, text-boolean);
    }

    .error {
        color: getCssVar(chat-tool-call-item, text-error);
    }

}